<template>
  <div class="rounded-lg p-1 grid grid-cols-4 gap-2 border border-slate-300 box-border shadow-md shadow-slate-400/50 "
       :class="`h-full rounded-lg ${data.isRecommend?' my-active-bg my-animate-pause':''}` ">
    <div class="col-span-1 flex justify-center items-center">
      <div
          :class="`${data.isRecommend?'animate-bounce':''} rounded-full border-2  w-10 h-10 outline-double outline-3 outline-offset-2  ${(data.percentage||0)>=100?'outline-red-600 border-red-100 text-red-400':'outline-blue-500 border-indigo-100 text-violet-700'}`">
        <p class="  leading-[2.2rem] font-mono  font-bold text-2xl text-center ">{{ data.index }}</p>
      </div>
    </div>
    <div class="col-span-3">
      <div class=" grid grid-cols-2  h-full text-sm  rounded-2xl">
        <el-badge :value="data.status!='outStock'?'':'out'" class="item" style="position:relative;top:-6px;left: -50px;padding: 0">
          <div
              class="border border-dashed border-gray-200/50 flex font-sans font-bold justify-center items-center" style="position:absolute;top: 6px;left:58px;">
            {{ data.locationCode || '--' }}
          </div>
        </el-badge>
        <div class="border border-dashed border-gray-200/50 flex font-mono justify-center items-center">
          {{ data.materialCode || '--' }}
        </div>
        <div class="col-span-2">
          <el-progress :percentage="data.percentage?.toFixed(2)||0"
                       :color="customColors">
            <template #default>
              <div style="color: #f56c6c;" v-if="data.percentage==100">{{'100%' }}</div>
              <div style="" v-else>{{ data.percentage?.toFixed(2) + '%' }}</div>
            </template>
          </el-progress>
        </div>
        <div class="border border-dashed border-gray-200/50 flex  justify-center items-center">
          <span class="text-xs ">{{ $t('mes.occupideQty2') }}:</span>
          <span class="text-blue-600">{{ data.usedInventory || 0 }}</span>
        </div>
        <div class="border border-dashed border-gray-200/50 flex  justify-center items-center">
          <span class="text-xs">{{ $t('wms.surplusQty') }}:</span>
          <span class="text-blue-600">{{ data.inventoryCapacity || 0 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

import { customColors } from '@/views/wms/warehouseLocation/data'

const props = defineProps({
  data: {
    required: false
  }
})
</script>

<style scoped>
.my-active-bg {
  background: rgba(66, 215, 155, 1)
}

.my-animate-pause {
  animation: my-active-bg-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}

@keyframes my-active-bg-pulse {
  0%, 100% {
    background-color: rgba(74, 222, 128, 1);
  }
  50% {
    background-color: rgba(74, 222, 128, 0.5);
  }
}
</style>
